<template>
    <div class="jianzhan-content">
        <Crumb name="Warehouse"></Crumb>
        <div style="float: left;margin-top: 20px;margin-bottom: 20px;">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="openAdd">Add Warehouse</el-button>
        </div>
        <div class="content">
            <div class="table-wrapper">
                <el-table
                        :data="warehouseList"
                        stripe
                        border
                        style="width: 100%">
                    <el-table-column
                            label="Warehouse Name"
                            prop="warehouseName"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="warehouseAddress"
                            label="Address"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="longitude"
                            label="Longitude">
                    </el-table-column>
                    <el-table-column
                            prop="latitude"
                            label="Latitude">
                    </el-table-column>
                    <el-table-column label="Operate">
                        <template slot-scope="scope">
                            <el-button icon="el-icon-edit" type="primary" @click="openEdit(scope.row)">Edit</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                title="Warehouse"
                :visible.sync="dialogVisible"
                width="80%"
                >
            <el-form ref="form" :model="warehouse" label-width="180px" :rules="rule">
                <el-form-item label="warehouse name" prop="warehouseName">
                    <el-input v-model="warehouse.warehouseName" placeholder="Warehouse Name" size="small" class="my-input"></el-input>
                </el-form-item>
                <el-form-item label="warehouse Address" prop="warehouseAddress">
                    <el-input v-model="warehouse.warehouseAddress" placeholder="Warehouse Address" size="small" class="my-input"></el-input>
                </el-form-item>
                <el-form-item label="Longitude" prop="longitude">
                    <el-input v-model="warehouse.longitude" placeholder="Longitude" size="small" class="my-input"></el-input>
                </el-form-item>
                <el-form-item label="Latitude" prop="latitude">
                    <el-input v-model="warehouse.latitude" placeholder="Latitude" size="small" class="my-input"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="submitForm">Confirm</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import {getWarehouseList,addWarehouse,modWarehouse} from "../../api/warehouse";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "warehouse",
        data(){
            return {
                warehouseList:[],
                warehouse:{
                    warehouseName:'',
                    warehouseAddress:'',
                    longitude:'',
                    latitude:''
                },
                rule:{
                    warehouseName:[{required:true}],
                    warehouseAddress:[{required:true}],
                    longitude:[{required:true}],
                    latitude:[{required:true}]
                },
                dialogVisible:false
            }
        },
        created(){
            this.getWarehouseList()
        },
        methods:{
            submitForm(){
                this.$refs.form.validate(async valid=>{
                    if (valid) {
                        const {id,warehouseName,warehouseAddress,longitude,latitude} = this.warehouse;
                        if(this.warehouse.id){
                            const {status} = await modWarehouse({warehouseName,warehouseAddress,longitude,latitude,id});
                            if (status === ERROR_OK) {
                                this.$notify.success('Modify Success');
                                this.getWarehouseList();
                            }
                        } else {
                            const {status} = await addWarehouse({warehouseName,warehouseAddress,longitude,latitude})
                            if (status === ERROR_OK) {
                                this.$notify.success('Add Success');
                                this.getWarehouseList();
                            }
                        }
                        this.dialogVisible = false;
                        this.clear();
                    } else {
                        this.$notify.warning('Please complete the form')
                    }
                })
            },
            clear(){
                this.warehouse = {
                        warehouseName:'',
                        warehouseAddress:'',
                        longitude:'',
                        latitude:''
                }
            },
            openEdit(warehouse){
                this.warehouse = warehouse;
                this.dialogVisible = true
            },
            openAdd(){
                this.dialogVisible = true
            },
            async getWarehouseList(){
                const {status,data} = await getWarehouseList();
                if(status === ERROR_OK) {
                    this.warehouseList = data
                }
            }
        },
        components:{Crumb}
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content{
        @include content
    }
</style>